import { VNode } from 'preact';
import { useComputed } from '@preact/signals';
import { IChatMessage } from '../../../interface';
import { Namespace } from '../../../utils';
import { AiChatController } from '../../../controller';
import './user-message.scss';

export interface UserMessageProps {
  controller: AiChatController;
  message: IChatMessage;
  /**
   * 内容大小，用于更新绘制
   *
   * @author chitanda
   * @date 2023-10-15 21:10:22
   * @type {number}
   */
  size: number;

  /**
   * 工具栏
   *
   * @type {VNode}
   * @memberof UserMessageProps
   */
  children: VNode;
}

const ns = new Namespace('user-message-question');

export const UserMessage = (props: UserMessageProps) => {
  const content = useComputed(() => props.message.content);

  return (
    <div className={ns.b()}>
      <div className={ns.e('user-header')}>
        {props.children}
        <div className={ns.e('user')}>我</div>
      </div>
      <div className={ns.e('content')}>
        <div dir='auto' className={ns.em('content', 'body')}>
          <p dir='auto' className={'pre-wrap-container'}>
            {content}
          </p>
        </div>
      </div>
    </div>
  );
};
